import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../services/ScreenAdapter.dart';
import '../config/Config.dart';
import 'package:dio/dio.dart';
import '../widget/ReturnButton.dart';
import '../model/ProductModel.dart';
import '../widget/LoadingWidget.dart';

class ProductListPage extends StatefulWidget {
  Map arguments;
  ProductListPage({Key key, this.arguments}) : super(key: key);

  _ProductListPageState createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  //Scaffold key
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  //listView的控制器 可监听事项
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _getProductListData();
    //监听滚动条滚动事件
    /*
    _scrollController.position.pixels //获取滚动条滚动的高度
    _scrollController.position.maxScrollExtent  //获取页面高度
     */
    _scrollController.addListener(() {
      //上拉请求数据
      // if (_scrollController.position.pixels <
      //     _scrollController.position.maxScrollExtent + 20) {
      //   //一定要请求完成和还有数据的前提下,才发起数据请求
      //   if (this.flag && this._hasMore) {
      //     print('商品列表正在 - 上拉获取数据');
      //     _getProductListData();
      //   }
      // }

      //下拉请求数据
      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 20) {
        //一定要请求完成和还有数据的前提下,才发起数据请求
        if (this.flag && this._hasMore) {
          print('商品列表正在 -下拉获取数据');
          _getProductListData();
        }
      }
    });
  }

  //分页
  int _page = 1;

  //每页有多少条数据
  int _pageSize = 8;

  //商品数据数据
  List _productList = [];

  /*
  排序:价格升序 sort=price_1 价格降序 sort=price_-1  销量升序 sort=salecount_1 销量降序 sort=salecount_-1
  */
  String _sort = "";

  /*二级导航数据*/
  List _subHeaderList = [
    {
      "id": 1,
      "title": "综合",
      "fileds": "all",
      "sort":-1, //排序规则是     升序：price_1     {price:1}        降序：price_-1   {price:-1}
    },
    {"id": 2, "title": "销量", "fileds": 'salecount', "sort": -1},
    {"id": 3, "title": "价格", "fileds": 'price', "sort": -1},
    {"id": 4, "title": "筛选"}
  ];
  //二级导航选中判断
  int _selectHeaderId = 1;

  //解决重复请求的问题，为true的时候就是请求完结了，false时就还在请求
  bool flag = true;

  //判断下一页是否还有数据
  bool _hasMore = true;

  //当页面下拉的时候，会触发 请求商品数据
  _getProductListData() async {
    //一开始请求数据的时候先设置当前请求状态为正在请求中。
    setState(() {
      this.flag = false;
    });
    var api =
        '${Config.domain}api/plist?cid=${widget.arguments["cid"]}&page=${this._page}&sort=${this._sort}&pageSize=${this._pageSize}';
    print(api);
    var result = await Dio().get(api);
    var productList = new ProductModel.fromJson(result.data);

    setState(() {
      //每一次获取新数据时都往数组里累积
      this._productList.addAll(productList.result);

      //请求成功的时候标识下
      this.flag = true;

      //如果当前新获取的数据长度小于每页所请求的数据值(_pageSize)，那就证明下一页没数据了
      if (productList.result.length < _pageSize) {
        //设置下数据状态,下页已经没数据了,无需再请求。
        this._hasMore = false;
      } else {
        //反之就是下一页可能还有数据
        this._page += 1; //自动加页码
      }
    });
  }

  //请求数据时显示加载中的圈圈，加载完毕后显示 我是有底线的
  Widget _showMore(index) {
    if (this._hasMore) {
      //如果下一页还有数据，且当前索引值等于当前页码的时候，下方显示一个转圈圈效果
      return (index == this._productList.length - 1)
          ? LoadingWidget()
          : Text("");
    } else {
      return (index == this._productList.length - 1)
          ? Text("--我是有底线的--")
          : Text("");
    }
  }

  //商品列表
  Widget _productListWidget() {
    if (this._productList.length > 0) {
      return Container(
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: ScreenAdapter.height(80)),
        child: ListView.builder(
          //配合监听下拉页面
          controller: _scrollController,

          itemBuilder: (context, index) {
            //拼接图片信息
            String pic = this._productList[index].pic;
            pic = Config.domain + pic.replaceAll('\\', '/');

            //每一个元素
            return Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Container(
                      width: ScreenAdapter.width(180),
                      height: ScreenAdapter.height(180),
                      child: Image.network(pic, fit: BoxFit.cover),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: ScreenAdapter.height(180),
                        margin: EdgeInsets.only(left: 10),
                        // color: Colors.red,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text("${this._productList[index].title}",
                                maxLines: 2, overflow: TextOverflow.ellipsis),
                            Row(
                              children: <Widget>[
                                Container(
                                  height: ScreenAdapter.height(36),
                                  margin: EdgeInsets.only(right: 10),
                                  padding: EdgeInsets.fromLTRB(10, 0, 10, 0),

                                  //注意 如果Container里面加上decoration属性，这个时候color属性必须得放在BoxDecoration
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(230, 230, 230, 0.9),
                                  ),

                                  child: Text("热销"),
                                ),
                                Container(
                                  height: ScreenAdapter.height(36),
                                  margin: EdgeInsets.only(right: 10),
                                  padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(230, 230, 230, 0.9),
                                  ),
                                  child: Text("品牌"),
                                ),
                              ],
                            ),
                            Text(
                              "¥ ${this._productList[index].price}",
                              style: TextStyle(color: Colors.red, fontSize: 16),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
                Divider(height: 20),

                //显示加载效果
                _showMore(index),
              ],
            );
          },
          itemCount: this._productList.length,
        ),
      );
    } else {
      return LoadingWidget(
        msg: '   此分类暂无商品信息!',
      );
    }
  }

  //筛选导航导航改变的时候触发
  _subHeaderChange(id) {
    if(id==4){
      //等于4的时候就是多选筛选，让右侧弹出内容
      setState(() {
        this._selectHeaderId=id;
      });
      _scaffoldKey.currentState.openEndDrawer();
    }else{
      //反之就是组装条件去搜索
      setState(() {
        this._selectHeaderId=id;

        //点击的时候拼装搜索条件 （id减1等于当前数组的key，获取数组里的排序规则）
        this._sort="${this._subHeaderList[id-1]['fileds']}_${this._subHeaderList[id-1]['sort']}";
        /*
       原理就是 价格排序的规则等于     //排序规则是     升序：price_1     {price:1}        降序：price_-1   {price:-1}
       一开始默认为当前标签对应的 print_-1 降序 ，更新sort后请求url会跟着变
         */

        //重新筛选后 之前的数据就要清空
        this._productList=[];

        //页数重置
        this._page=1;

        //重置回到顶部
        _scrollController.jumpTo(0);

        //改变sort排序 因为这个参数要么为-1要么为1，如若当前为-1则*1就是1，如若当前为1*-1那就等于-1。 因为只存在两种情况 要么升序 要么降序
        this._subHeaderList[id - 1]['sort'] =
            this._subHeaderList[id - 1]['sort'] * -1;

        //要重置_hasMore，因为升序点击为降序的时候 要告知接口还有数据, 不然在第一次升序请求参数到最后没参的时候 方法里把这个值设置为了false那接口只会请求一次了。
        this._hasMore = true;

        //组装好数据和重置后，再次发起请求数据
        this._getProductListData();
      });
    }
  }
  //导航筛选的icon图标
  Widget _showIcon(id){
    //销量和价格才显示图标
    if(id==2 || id==3){

      //判断当前是降序还是升序
      if(this._subHeaderList[id-1]['sort']==1){
        //降序 从大到小
        return  Icon(Icons.arrow_drop_down);
      }else{
        return  Icon(Icons.arrow_drop_up);
      }
    }
    return Text('');
  }


  //筛选导航列表
  Widget _subHeaderWidget() {
    return Positioned(
      top: 0,
      height: ScreenAdapter.height(80),
      width: ScreenAdapter.width(750),
      child: Container(
        width: ScreenAdapter.width(750),
        height: ScreenAdapter.height(80),
        // color: Colors.red,
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    width: 1, color: Color.fromRGBO(233, 233, 233, 0.9)))),
        child: Row(
          //循环显示当前可筛选的项
          children: this._subHeaderList.map((value) {
            return Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(
                      0, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "${value['title']}",
                        textAlign: TextAlign.center,
                        style: TextStyle(color: this._selectHeaderId==value['id']?Colors.red:Colors.black),
                      ),
                      _showIcon(value['id']),
                    ],
                  ),
                ),
                onTap: () {
                  _subHeaderChange(value['id']);
                },
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);

    return Scaffold(
      key: _scaffoldKey,
      endDrawer: Drawer(
        child: Container(
          child: Text(""),
        ),
      ),
      appBar: AppBar(
        title: Text("商品列表"),
        // leading: Text(""),
        actions: <Widget>[Text("")],
      ),

      body: Stack(
        children: <Widget>[
          _productListWidget(),
          _subHeaderWidget(),
        ],
      ),

      //设置一个返回按钮
      floatingActionButton: ReturnButton(),
    );
  }
}
